<template>
    <div id="top">
        <router-link class="link" :to="{path: '/'}" ><p id="logo" style="letter-spacing: 5px;">WE TALK</p></router-link>
        <div id="nav">
            <router-link class="nav_class" :to="{path:'/talk/find'}" style="width:20%; display:inline-block; margin-right:5%; margin-left:5%"><p>找话题</p></router-link>
            <router-link class="nav_class" :to="{path:'/talk/submit'}" style="width:20%; display:inline-block; margin-right:5%"> <p>提话题</p></router-link>
            <router-link class="nav_class" :to="{path:'/talk/say'}" style="width:20%; display:inline-block; margin-right:10%"> <p>聊话题</p></router-link>
        </div>

        <p id="self" style="line-height: 120px; display:inline;">请<a style="color:red; display:inline; cursor:pointer">登录</a></p>
        <div @mouseover="user_div_show()" @mouseout="user_div_hidden()" style="display:inline-block; margin-left: 5px;">
            <img  src="../../assets/logo.png" style="height: 80px; height: 80px; display:inline; vertical-align:middle">
            <div id="user_div" ref="user_div" style="position:absolute; visibility:hidden; width:120px; background-color:gray">
                <ul>
                    <router-link class="link" :to="{path: '/my/comment'}"><li>我评论的</li></router-link>
                    <router-link class="link" :to="{path: '/my/publish'}"><li>我发表的</li></router-link>
                    <router-link class="link" :to="{path: '/my/attention'}"><li>我关注的</li></router-link>
                    <router-link class="link" :to="{path: '/my/about'}"><li>关于我的</li></router-link>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>

import {config} from '../../global/constant.js'

export default {
    created(){
    },
    methods:{
        isLogin(){
        },
        user_div_show(){
            const self = this;
            self.$refs.user_div.style.visibility = "visible";
        },
        user_div_hidden(){
            const self = this;
            self.$refs.user_div.style.visibility = "hidden";
        }
    }
  
}
</script>


<style>
    #top{
        padding: 0px;
        margin: 0px;
        height: 120px;
        width: 100%;
        background-color: aqua;
    }
   #logo{
       margin:auto 0;
       margin-left: 14%;
       margin-right: 5%;
       line-height: 120px;
        display: inline;
        font-size: 110%;
   }
   #nav{
       display: inline-block;
       height: 120px;
       margin: auto 0;
       width: 45%;
       text-align: center;

   }
   #nav p{
       display: inline-block;
       line-height: 120px;
       margin: auto 10%;
       font-size: 150%;
       font-family: 'Times New Roman', Times, serif;
       cursor: pointer;
   }
   #self{
       display: inline-block;
       margin: auto 0;
       margin-left: 4%;
       width: 20%;
   }
   #user_div ul{
        list-style: none;
        text-align: center;
   }
   #user_div ul li{
        margin-top: 10px;
        margin-bottom: 10px;
        cursor: pointer;
        color:cornsilk;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -khtml-user-select: none; /* Konqueror */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently not supported by any browser */
   }
   #user_div ul li:hover{
       color:burlywood;
   }
   #user_div ul li:active{
       color: black;
   }
   .nav_class:hover{
       background-color: aquamarine;
   }
   .nav_class:active{
       background-color: black;
   }
   .link{
       text-decoration-line: none
   }
</style>

